<template>
	<view class="wallet-page">
		<view class="container">
			<view class="deposit"> {{$t('Page.user.ckje')}} </view>
			<view class="rechargeInput">
				<image class="coin-icon" src="@/static/coin.png"></image>
				<input class="uni-input" type="text" v-model="rechargeAmount" disabled />
			</view>
			<view class="rechargeAmountBox">
				<view v-for="item, key in charge_list" :key="'charge'+key" class="chargeAmount"
					@click="clickCharge(item, key)">
					<view :class="['chargeAmountPg', chargeAmountCurrent === key ? 'chargeAmountActive' : '']">
						<view class="textZindex"> {{ key }} </view>
						<view class="textZindex text-orange" v-show="isPar"> +{{ item }}{{$t('Page.user.jj')}}
						</view>
						<view :class="['chargeAmountBg', chargeAmountCurrent === key ?'rotate_active':''] ">
							<view class="acChargeAmountPg"></view>
							<view class="acChargeAmountBg"></view>
						</view>
					</view>
				</view>
			</view>
			<view class="rechargeIns" v-show="isPar">
				<view class="receba">
					Receba um bónus de R${{curBonus}} no seu primeiro depósito de R${{rechargeAmount}}
				</view>
				<view class="deposit_top">
					<view> +{{curBonus}} Receba um bónus de R${{curBonus}} no seu primeiro depósito de
						R${{rechargeAmount}}
					</view>
					<view class="text-orange"> +{{curBonus}} </view>
					<view class="rotate_active">
						<view class="acChargeAmountPg"></view>
						<view class="acChargeAmountBg"></view>
					</view>
				</view>
				<view class="deposit_bottom">
					<view class="">
						{{$t('Page.user.ckjj')}}
					</view>
					<view class="text-yellow">
						+{{curBonus}}
					</view>
				</view>
			</view>
			<view class="noParBox">
				<checkbox-group @change="checkboxChange">
					<label>
						<checkbox value="cb" color="#FFFFFF" /> {{$t('Page.user.bcjmbhd')}}
					</label>
				</checkbox-group>
			</view>
			<view class="submit-wrap">
				<waves class="depositBtn" @onTap="handeleDeposit"> {{$t('Page.user.ck')}} </waves>
			</view>
		</view>
		<view class="widthdraw-record">
			<text class="record-tips" @click="toRecord">{{$t('Page.user.ckjl')}}</text>
			<uni-icons class="record-icon" custom-prefix="iconfont" type="icon-dingdan" size="25" color="#fff"
				@click="toRecord"></uni-icons>
		</view>
	</view>
</template>

<script>
	import {
		sendMessage
	} from '@/api/websocket.js'
	import {
		Debounce
	} from '@/utils/common.js'
	export default {
		data() {
			return {
				rechargeList: [{
					name: 'PixPay-1'
				}, {
					name: 'PixPay-2'
				}],
				chargeAmountCurrent: 0,
				rechargeAmount: '',
				charge_list: {},
				curBonus: 0,
				isPar: 1,
				rechargeInfo: {},
				userWallet: {},
				chargeseting: {},
				order_sn: ''
			}
		},
		watch: {
			rechargeAmount: {
				handler(val, oldVal) {
					if (val === '') {
						this.$nextTick(() => {
							this.rechargeAmount = 0
						})
						return
					}
					let charge_list = Object.keys(this.charge_list)

					let chargeAmountCurrent = charge_list.find(item => {
						return parseInt(item) >= parseInt(val)
					})
					this.chargeAmountCurrent = chargeAmountCurrent || charge_list[charge_list.length - 1]
				}
			},
		},

		created() {
			this.getWalletInfo()
		},
		methods: {
			onComponentShow() {
				console.log('Deposit')
				if (!this.order_sn) return
				const {
					CHECKCHARGE
				} = this.$api
				sendMessage({
					flag: CHECKCHARGE,
					content: {
						order_sn: this.order_sn
					}
				})
				uni.$once(CHECKCHARGE, (res) => {
					const {
						code,
						data
					} = res
					if (code === 1 && data.status) {
						uni.showToast({
							icon: "success",
							title: res.msg
						})
					}
				})
			},
			getWalletInfo() {
				const {
					USERWALLET
				} = this.$api
				sendMessage({
					flag: USERWALLET,
				})
				uni.$once(USERWALLET, (res) => {
					const {
						code,
						data
					} = res
					if (code === 1) {
						this.charge_list = JSON.parse(data.userinfo.chargeseting.charge_list)
						this.rechargeAmount = this.chargeAmountCurrent = Object.keys(this.charge_list)[0]
						this.chargeseting = data.userinfo.chargeseting
					}
				})
			},

			checkboxChange(e) {
				this.isPar = !e.detail.value.length
				console.log("this.isPar: ", this.isPar);
			},
			clickCharge(item, key) {
				this.rechargeAmount = key
				this.chargeAmountCurrent = key
				this.curBonus = item
			},

			showToast(title) {
				uni.showToast({
					icon: 'none',
					title
				})
			},

			// 使用 Debounce 修饰符，实现防抖效果
			handeleDeposit: Debounce(function() {
					const {
						CHARGE
					} = this.$api,
						data = {
							type: 1,
							price: this.rechargeAmount,
							is_bonus: this.isPar ? 1 : 0
						}
					sendMessage({
						flag: CHARGE,
						content: data
					})
					uni.$once(CHARGE, (res) => {
						this.showToast(res.msg)
						if (res.code === 1) {
							const url = res?.data?.url
							this.order_sn = res.data.order_sn
							uni.navigateTo({
								url: `/pages/user/wallet/components/payment?item=${encodeURIComponent(JSON.stringify(res.data))}`
							})
							// if (url) {
							// 	// #ifdef APP
							// 	plus.runtime.openURL(url)
							// 	// #endif
							// 	// #ifdef H5
							// 	window.open(url)
							// 	// #endif	
							// }
						}
					})
				},
				500),

			toRecord() {
				uni.navigateTo({
					url: `/pages/user/transactions/transactions?index=0`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wallet-page {
		width: 100%;

		.container {
			width: calc(100% - 48px);
			margin: 0 auto;
			box-sizing: border-box;

			.deposit {
				font-weight: 700;
				margin-bottom: 8px;
				font-size: 16px;
				color: #fff;
				min-height: 36px;
			}

			.pixPayBox {
				flex: 1;
				width: 100%;
				display: flex;
				flex-wrap: wrap;

				.pixPay {
					min-height: 50px;
					width: 48%;
					margin: 0 1%;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #fff;
					padding: 4px 16px;
					background: #2d353d;
					border-radius: 2rem;
					box-shadow: 0 1px 5px rgba(0, 0, 0, .2), 0 2px 2px rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12);
					margin-bottom: 10px;
				}

				.pixPayActive {
					background: #33c38f;
				}
			}

			.rechargeInput {
				width: 100%;
				border-radius: .75rem;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background: #2b333b;
				height: 40px;

				.coin-icon {
					width: 30px;
					height: 30px;
					margin-left: 10px;
				}

				.uni-input {
					color: #fff;
					font-size: 1.2rem;
					font-weight: 700;
					text-align: right;
					padding: 8px;
					height: 40px;
					background-color: transparent;
				}
			}

			.rechargeAmountBox {
				display: flex;
				flex-wrap: wrap;
				width: 100%;
				margin-top: 24px;

				.chargeAmount {
					cursor: pointer;
					margin-bottom: 16px;
					position: relative;
					width: 25%;
					padding-right: 16px;
					overflow: hidden;
					border-radius: .5rem;
					align-items: center;
					font-weight: 700;
					color: #fff;

					.chargeAmountPg {
						width: 100%;
						height: 100%;
						padding: 16px;
						position: relative;
						display: flex;
						justify-content: center;
						align-items: center;
						background: #2d353d;
						border-radius: .5rem;
					}


					.chargeAmountActive {
						background: #1a55ef;
					}

					&:nth-child(4n) {
						padding-right: 0px;
					}

					.text-orange {
						color: #ff9800;
						position: absolute;
						bottom: 2px;
						z-index: 1;
					}

					.rotate_active {
						animation: roli_rotate 5s linear infinite;
					}

					.textZindex {
						z-index: 2;
					}

					.chargeAmountBg {
						width: 100%;
						display: inline-block;
						vertical-align: middle;
						position: absolute;
						z-index: 1;

						.acChargeAmountPg {
							padding-top: 100%;
						}

						.acChargeAmountBg {
							position: absolute;
							top: 0;
							right: 0;
							bottom: 0;
							left: 0;
							background-repeat: no-repeat;
							background-size: cover;
							background-position: 50% 50%;
							background-image: url('@/static/rotate.png');
						}
					}
				}
			}

			.rechargeIns {
				width: 100%;
				border-radius: .5rem;
				margin-top: 8px;
				background-color: #2d353d;
				color: #fff;
				font-size: 14px;

				.receba {
					padding: 8px 16px;

				}

				.deposit_top {
					display: flex;
					justify-content: space-between;
					align-items: center;
					position: relative;
					background-image: linear-gradient(90deg, #0c90ff, #00398f);
					border-radius: .75rem .75rem 0 0;
					padding: 10px 16px;
					position: relative;
					width: 100%;
					z-index: 1;
					height: 80px;
					overflow: hidden;
					color: #ff9800;

					.text-orange {
						align-items: center;
						color: #ffaa17;
						display: flex;
						font-size: 40px;
						font-style: italic;
						font-weight: 800;
						grid-column-end: 2;
						grid-column-start: 2;
						grid-row-start: 1;
						justify-content: center;
						margin-right: 2rem;
						padding: 0;
						text-align: left;
						text-shadow: 1px 1px 1px #776e1c, 1px 2px 1px #8f852a, 1px 3px 1px #8f852a, 1px 4px 1px #8f852a;
						z-index: 4;
						height: 40px;
					}

					.rotate_active {
						margin-left: 30%;
						animation: roli_rotate 10s linear infinite;
						width: 100%;
						display: inline-block;
						vertical-align: middle;
						position: absolute;

						.acChargeAmountPg {
							padding-top: 100%;
						}

						.acChargeAmountBg {
							position: absolute;
							top: 0;
							right: 0;
							bottom: 0;
							left: 0;
							background-repeat: no-repeat;
							background-size: cover;
							background-position: 50% 50%;
							background-image: url('@/static/rotate.png');
						}
					}
				}

				.deposit_bottom {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 10px 16px;

					.text-yellow {
						color: #ffeb3b;
					}
				}
			}

			.noParBox {
				margin-top: 24px;
				width: 100%;
				border-radius: .5rem;
				background-color: #2d353d;
				height: 40px;
				color: #fff;
				display: flex;
				padding-left: 10px;
				align-items: center;

				/deep/ .uni-checkbox-input {
					transform: scale(0.8);
					border: 2px solid #000000;
					border-radius: 2px;
					background-color: transparent;
				}

				/deep/ .uni-checkbox-input-checked {
					border: 2px solid #00e701;
					background-color: rgb(0, 231, 1);
				}
			}

			.submit-wrap {
				width: 100%;
				display: flex;
				justify-content: center;
				margin: 24px auto;
				color: #fff;

				.depositBtn {
					color: #fff;
					font-size: 14px;
					color: #fff;
					background: #33C38F;
					width: 41.6667%;
					text-align: center;
					font-weight: 700;
					padding: 0 8px;
					height: 52px;
					line-height: 52px;
					border-radius: .5rem;
					box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12);
				}
			}

		}

		.widthdraw-record {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #2b333b;
			padding: 8px;
			height: 56px;

			.record-tips {
				color: #177ddc;
				text-decoration: underline;
				cursor: pointer;
				margin-left: 16px;
			}

			.record-icon {
				cursor: pointer;
			}
		}
	}


	@keyframes roli_rotate {
		0% {
			transform: rotateZ(0deg)
		}

		to {
			transform: rotateZ(360deg)
		}
	}
</style>